<template>
  <div class="pro-vipboard-lastplugin">
    <div class="plugin_wrp">
      <div class="plugin_item plugin-header">
        <div class="icon">
          图标
        </div>
        <div class="text">
          插件升级
        </div>
        <div class="btn_wrp">
          下载升级
        </div>
      </div>
      <div
        v-for="(item, index) in list"
        :key="index"
        class="plugin_item"
      >
        <div class="icon">
          <div
            :style="{backgroundColor: item.color || '#ffe94d'}"
            class="outer"
          >
            <div class="inner">
              <i
                :class="item.VIP_TB || 'jeicon jeicon-maopao'"
                :style="{color: item.VIP_TBYS || '#ffe94d'}"
                class="plugin_icon"
              />
            </div>
          </div>
        </div>
        <div class="text text-content">
          {{ item.VIP_NAME }}{{ item.VIP_VERSION }}
        </div>
        <div class="btn_wrp">
          <span
            @click.stop="handlePluginDownloadBtn(item)"
            class="btn download"
          >
            立即下载
          </span>
          <span
            @click.stop="handlePluginHistory(item)"
            class="btn history"
          >
            历史升级
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pluginDownloadNow } from '../../actions/api';

export default {
  name: 'Index',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    handlePluginDownloadBtn(item) {
      pluginDownloadNow({ pluginPkId: item.JE_PHONE_FUNC_LOG_VIP_ID }).then((res) => {
        JE.File.doAct('download', '', '', res.obj, `${item.VIP_NAME}${item.VIP_VERSION}`);
      });
    },
    handlePluginHistory(item) {
      JE.showFunc('JE_PHONE_FUNC_LOG_VIP', {
        whereSql: ` AND VIP_CODE = '${item.VIP_CODE}' `,
        j_query: {
          custom: [{
            code: 'VIP_CODE', value: item.VIP_CODE, type: '=',
          }],
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
  .pro-vipboard-lastplugin {
    .plugin_wrp {
      .plugin_item {
        margin-top: 20px;
        font-weight: bold;
        &.plugin-header {
          margin: 10px 0;
          > div {
            height: 20px;
            font-size: 13px;
          }
        }
        > div {
          float: left;
        }
        .icon {
          width: 80px;
          > .outer {
            width: 32px;
            height: 32px;
            border-radius: 12px;
            position: relative;
            > .inner {
              width: 22px;
              height: 22px;
              background: #ffffff;
              border-radius: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              > .plugin_icon {
                position: absolute;
                font-size: 16px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 100%;
              }
            }
          }
        }
        .text {
          width: 300px;
          font-size: 13px;
          padding-right: 30px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          /* autoprefixer:off */
          -webkit-box-orient: vertical;
          /* autoprefixer:on */
          &.text-content {
            line-height: 32px;
          }
        }
        .btn_wrp {
          > .btn {
            width: 80px;
            height: 26px;
            line-height: 26px;
            border-radius: 4px;
            position: relative;
            top: 3px;
            &.download {
              background: #386BD0;
              border: 1px solid #386BD0;
              color: #ffffff;
            }
            &.history {
              background: #f4f4f4;
              border: 1px solid #dddddd;
              color: #444444;
            }
            &:last-child{
              margin-left: 10px;
            }
          }
        }
        &:after {
          content: '';
          display: table;
          clear: both;
        }
      }
    }
  }
</style>
